<template>
  <div>
    <main>
      <section class="about about2">
        <div class="location">
          <h2>最新动态</h2>
          <p>LATEST NEWS</p>
        </div>
        <hr>
        <div class="page_header">
          <h2>正品控宣言：让商品拥有独一无二的身份证</h2>
          <div class="source-share">
            <div class="source">
              <span><small class="date">2016-03-12&nbsp;&nbsp;&nbsp;&nbsp;08:00
                  &nbsp;&nbsp;&nbsp;&nbsp;</small>来源中国家电网&nbsp;&nbsp;&nbsp;崔冬惠</span>
            </div>
            <div class="share">
              分享到：<a href="#"><i></i>朋友圈</a>&nbsp;
              <a href="#"><i></i>QQ空间</a>&nbsp;
              <a href="#"><i></i>新浪微博</a>&nbsp;

            </div>
          </div>
        </div>
        <div class="page_content">
          <div class="news-article">
            <p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸
              引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也
              为致力于向家电企业提供优质服务的创业者们搭建了展示自己的平台。记者在逛展时遇到杭州沃朴物联科技有限公司
              CEO袁涌耀先生，拥有无限创业激情的他向记者介绍了公司的主打产品——正品控动态智能防伪标签。下面，就是见证高
              科技的时刻啦，且看记者为您秀一下正品控的神奇之处。</p>

            <h3>售前防伪让消费者购物更放心</h3>

          </div>
          <div class="news-article-footer">
            <p class="news-prev"><a href="#">上一篇：美的焖香鼎釜IH智能电饭煲全球首发</a></p>
            <p class="news-next"><a href="#">下一篇：2016年中国家电发展高峰论坛文字实录</a></p>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: 'HotelSystemArticle',

  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.page_header {
  width: 1000px;
  margin-top: 80px;
  margin-left: 200px;
}

.page_header h2 {
  margin-bottom: 20px;
}

.page_content {
  width: 950px;
  margin-left: 225px;
  margin-top: 20px;
}

.source-share {
  padding-bottom: 14px;
  overflow: hidden;
  border-bottom: 1px dotted #ccc;
  color: #999;
  font-size: 12px;
}

.source {
  float: left;
}

.share {
  float: right;
}

.source-share a {
  color: #999;
}

.source-share .share a i {
  display: inline-block;
  padding-right: 3px;
  background-image: url("../images/iconfont-weixin.png");
  background-repeat: no-repeat;
}

.source-share .share a:nth-child(1) i {
  width: 13px;
  height: 11px;
}

.source-share .share a:nth-child(2) i {
  width: 15px;
  height: 13px;
  background-image: url("../images/iconfont-qzone.png");
  /* background-position: 0 -19px; */
}

.source-share .share a:nth-child(3) i {
  width: 15px;
  height: 13px;
  background-image: url("../images/iconfont-xinlang.png");
  /* background-position: 0 -40px; */
}

.source-share .share a:nth-child(4) i {
  width: 15px;
  height: 14px;
  background-image: url("../images/iconfont-tengxunweibo.png");
  /* background-position: 0 -61px; */
}

.news-article p,
h3 {
  text-indent: 30px;
  text-align: left;
  margin-top: 10px;
}

.news-article img {
  margin: 20px auto;
}

.news-article span {
  font-size: 16px;
}

.news-article-footer {
  border-top: 1px dotted #ccc;
  margin-top: 60px;
}

.news-prev {
  float: left;
}

.news-next {
  float: right;
}

footer {
  margin-top: 100px;
}

a {
  list-style: none;
  text-decoration: none;
}

.location {
  width: 1000px;
  float: right;
  overflow: hidden;
}

.location h2 {
  overflow: hidden;
  font-size: 30px;
  font-weight: 400;
  padding: 5px 10px 5px 25px;
  float: left;
}

.location h2:after {
  content: "";
  background-color: #01a1ff;
  display: block;
  width: 4px;
  height: 42px;
  margin-left: -10px;
  margin-top: -40px;
}

.location p {
  float: left;
  padding-top: 25px;
}

.location ul {
  margin-right: 26px;
  float: right;
  padding-top: 25px;
}

.location li {
  float: left;
  color: gray;
  padding: 2px;
}

.location li a {
  color: gray;
}

.location .active {
  color: #01a1ff;
}

.about hr {
  width: 1000px;
  background-color: #e5e5e5;
  float: right;
  margin-bottom: 20px;
}

section {
  margin-bottom: 20px;
  display: block;
  text-align: center;
}

section .title {
  margin-bottom: 30px;
}

section p {
  font-size: 14px;
  color: #666666;
}

article {
  display: flex;
}

.about {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.content {
  width: 1020px;
  margin: 0 auto;
}

.about h1 {
  line-height: 40px;
}

.title:after {
  content: "";
  background-color: #01a1ff;
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto;
}

/* */
</style>
